<template>
	<view class="container">
		<view class="company_name">
			{{ company_name }}
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.path" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="tips">
			<view class="location">
				<h3 class="margin-tb-xs">{{ link_man }}</h3>
				<view class="font_24 font_999 margin-bottom-xs">
					地址：{{area}}{{address}}
				</view>
			</view>
			<view class="call">
				<view>我要留言</view>
				<view @tap="call">拨打电话</view>
			</view>
		</view>
		<view class="solids-top solids-bottom">
			<menu-list :cuIconList="cuIconList" @onTap="go"></menu-list>
		</view>
		<nav-title class="margin-top-xl" title="热门产品"></nav-title>
		<list :listArr="hot" @onTap="tap"></list>
	</view>
</template>

<script>
	import menuList from '@/components/menuList.vue';
	import navTitle from '@/components/navTitle.vue';
	import list from '@/components/list.vue'

	export default {
		data(){
			return{
				company_name: '',
				swiperList:[],
				link_man: '',
				phone: null,
				area: '',
				address: '',
				hot: [],
				cuIconList: [
				{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 0,
					name: '产品中心',
					id: 1
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 0,
					name: '案例展示',
					id: 2
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '优惠领取',
					id: 3
				},{
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '公司介绍',
					id: 4
				},{
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '门店展示',
					id: 5
				}],
			}
		},
		onLoad(option) {
			this.getData(option.id)
		},
		methods:{
			go: function(id){
				if(id === 1){
					uni.navigateTo({
						url: '../category/category'
					})
				}else if(id === 2){
					uni.navigateTo({
						url: ''
					})
				}else if(id === 3){
					uni.navigateTo({
						url: '../couponList/couponList'
					})
				}else if(id === 4){
					uni.navigateTo({ 	
						url: '../companyIntroduction/companyIntroduction'
					})
				}else{
					uni.navigateTo({
						url: '../storeList/storeList?id=14'
					})
				}
			},
			getData: function(id){
				uni.request({
					url:'https://wechat.lccmart.com/ygy/api/wechatapi/get_cominfo',
					data:{
						cid: id
					},
					success:(res)=> {
						const data = res.data.data;
						const {name, swiper, hot, area, address, link_man, phone} = data;
						this.company_name = name;
						this.swiperList = swiper;
						this.area = area;
						this.address = address;
						this.link_man = link_man;
						this.phoneNumber = phone;
						this.hot = hot;
					}
				})
			},
			call: function(){
				uni.makePhoneCall({
				    phoneNumber: this.phoneNumber
				});
			},
			tap: function(id){
				console.log(id)
				uni.navigateTo({
					url: `../product/product?id=${id}`
				})
			}
		},
		components: {
			menuList,
			navTitle,
			list
		}
	}
</script>

<style lang="less">
	.tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.company_name {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 40rpx;
	}

	.swiper {
		height: 400rpx;
	}

	.tips {
		width: 550rpx;
		padding: 0 20rpx;
		border: 1px solid #ccc;
		background-color: #fff;
		margin: 20rpx auto;

		.location {
			border-bottom: 1px solid #C0C0C0;
			padding: 5rpx 0;

			h3 {
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.call {
			display: flex;

			view {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
